<template>
    <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff0000">
            <van-swipe-item 
                v-for="item in bannerList"
                :key="item.bannerId"
            >
                <div class="banner-item">
                    <img :src="item.pic" alt="">
                    <div class="banner-type" :style="{'backgroundColor':item.titleColor}">
                        {{item.typeTitle}}
                    </div>
                </div>
                
            </van-swipe-item>
            
        </van-swipe>
    </div>
</template>
<script>
export default {
    name:'banner',
    data() {
        return {
            bannerList:[]
        }
    },
    created() {
        //获取banner
        this.Public.getBanner({type:2}).then(res =>{
            if(res.code == 200) {
                this.bannerList = res.banners;
            }
        })
    }
}
</script>
<style lang="less" scoped>
    .banner{
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
        .my-swipe{
            border-radius: 10px;
            .van-swipe-item{
                height: auto;
            }
        }
        img{
            width: 100%;
            border-radius: 10px;
            box-sizing: border-box;
        }
        .banner-item{
            position: relative;
            border-radius: 10px;
            .banner-type{
                position: absolute;
                right: 0px;
                bottom: 6px;
                padding:4px 12px;
                border-radius: 10px 0px 10px 0px;
                font-size: 20px;
                color: #fff;
                box-sizing: border-box;
            }
        }
    }
</style>